<template>
  <div class="m-contain edit-address-list">
    <van-nav-bar title="选择地址"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="m-main">
      <ul>
        <li v-for="(item,index) in addresslist"
            :key="index">
          <div class="padding20">
            <p>{{item.name}}</p>
            <p style="margin: 4px 0;">{{item.phone}}</p>
            <p>{{item.address}}</p>
          </div>

          <div class="line"></div>
          <div class="flex padding20">
            <p>
              <img :src="item.flag?require('@/assets/image/person/checked.png'):require('@/assets/image/person/nocheck.png')"
                   width="26px"
                   alt=""
                   @click="item.flag=!item.flag"
                   class="middle"> <span class="middle fontsize"
                    style="color:#666666">设为默认地址</span>
            </p>
            <div class="flex">
              <p @click="$router.push('/user/editaddress')"><img :src="require('@/assets/image/person/edit.png')"
                     width="18px"
                     alt=""
                     class="middle"> <span class="middle fontsize">编辑</span></p>
              <p style="margin-left: 20px;"><img :src="require('@/assets/image/person/del.png')"
                     width="18px"
                     alt=""
                     class="middle"> <span class="middle fontsize">删除</span></p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="btn"
         @click="$router.push('/user/editaddress')">
      <van-button type="danger">添加新地址</van-button>
    </div>
  </div>
</template>
<script>

import Vue from 'vue';

import { NavBar, Button } from 'vant';

Vue.use(NavBar);
Vue.use(Button);
export default {
  name: "userInfo",
  data() {
    return {
      addresslist: [
        { name: '王小姐', phone: '222222222', address: '发发发发发发发发发发', flag: false },
        { name: '王小姐', phone: '222222222', address: '发发发发发发发发发发', flag: true }
      ]
    }
  },
  components: {

  },
  methods: {
    onClickLeft() {
      this.$router.replace('/mine')
    }
  }
}
</script>

<style lang="less">
.edit-address-list {
  van-image__img {
    margin-top: 10px;
  }
  .van-cell__label {
    color: #333333;
  }
  .van-button {
    width: 100%;
    border-radius: 0;
  }
  .van-button--danger {
    background-color: #e62b4b !important;
    border: 1px solid #e62b4b !important;
  }
}
</style>

<style lang="less" scoped>
.edit {
  min-height: 100vh;
  width: 100%;
  background-color: #fff;
  .van-cell {
    height: 63px;
  }
}

ul {
  color: #333333;
  font-size: 15px;
  li {
    .flex {
      display: flex;
      justify-content: space-between;
    }
    .middle {
      vertical-align: middle;
    }
    .line {
      height: 1px;
      width: 100%;
      background-color: #e6e6e6;
    }
    .padding20 {
      padding: 14px 20px;
    }
    .fontsize {
      font-size: 13px;
    }
  }
}
.btn {
  height: 46px;
  line-height: 46px;
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>